<template>
  <div>
    <el-container>

      <!-- 中间     -->
      <el-main width="70%">
        <!--头部-->
        <div
          style="display: flex; justify-content: space-between; font-size: 16px; border-bottom: 1px solid #ccc; padding-bottom: 5px"
        >
          <div>
            <span class="el-icon-tickets" style="margin-right: 15px"></span>
            <span>设备列表</span>
          </div>
        </div>

        <!--搜索-->


        <div style="margin-top: 5px">
          <el-form ref="gridHeadLayout"  :model="searchForm" class="monitoring">
            <el-row>
              <el-col :span="4">
                <el-form-item>
                  <el-input
                    v-model="searchForm.equipmentName"
                    size="mini"
                    placeholder="请输入设备名称"
                  >
                  </el-input>

                </el-form-item>
              </el-col>

              <el-col :span="3">

                <el-button-group>
                  <el-button size="small" icon="el-icon-search" @click="gridHeadSearch"></el-button>
                  <el-button size="small" icon="el-icon-refresh-right" @click="gridHeadEmpty"></el-button>
                </el-button-group>
              </el-col>
            </el-row>
          </el-form>
        </div>


        <div style="max-height: calc(100vh - 285px);height: calc(100vh - 285px); overflow: auto;">
          <el-row>
            <el-col :span="6" v-for="(item, index) in tableData" :key="index">
              <el-card shadow="hover" style="margin: 5px; padding-bottom: 10px;">
                <div style="position: relative; border-bottom: 1px solid #ccc; padding-bottom: 20px;height: 100px;">
                      <span style="position:absolute; top: 10px">
                        <!-- 根据 appType 的值显示不同的图片 -->
                        <img style="height: 70px; width: 70px" v-if="item.image != null" :src="item.image" />
                        <img style="height: 70px; width: 70px" v-else src="@/assets/equipmentDefaultImg.png" />
                        <!-- 添加更多条件根据需要显示不同的图片 -->
                      </span>
                  <span style="position: absolute; top: 0; left: 80px; margin-left: 10px">
                        <strong style="font-size: 18px">{{ item.equipmentName.length > 10 ? item.equipmentName.substring(0, 10) + '...' : item.equipmentName }}</strong>
                        <span
                          :style="{
                               display: 'inline-block',
                               height: '8px',
                               width: '8px',
                               background: item.isEnable === 1 ? 'rgb(10, 191, 91)' : 'rgb(229, 69, 69)',
                               borderRadius: '7px',
                               verticalAlign: 'middle',
                               marginLeft: '10px',
                               marginBottom: '5px'}">
                        </span>
                      </span>
                  <span style="position: absolute; top: 39px; left: 80px; margin-left: 10px;font-size: 14px">
                        <span style="color: #646a73">产品名称：</span>
                        <span style="color: #1677ff">{{ item.productName }}</span>
                      </span>
                  <span style="position: absolute; top: 69px; left: 80px; margin-left: 10px;font-size: 14px">
                        <span style="color: #646a73">关联点位：</span>
                        <span style="color: #1677ff">{{ item.pointCount }}</span>
                      </span>
                </div>
                <div style="margin-top: 10px;">
                  <div style="float: right">
                    <el-button size="mini" type="primary" style="margin: 5px"
                               @click="rowDetail(item)">数据查询
                    </el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

        </div>

        <div style="text-align: right;margin-top: 30px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="[8, 16, 32, 64, 128]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </div>


      </el-main>
    </el-container>


  </div>
</template>

<script>
import { formatDate } from "@/utils/dateUtils"

import {page as getPage} from '@/api/cps/equipment-api'
export default {
  name: 'index',
  components:{

  },
  data() {
    return {
      tableLoading:false,
      tableData:[],
      page: {
        pageSize: 8,
        currentPage: 1,
        total: 0
      },
      searchForm:{},
      searchTitle: 'cabinName',
      treeData: [],
      defaultProps: {
        label: 'cabinName',
        value: 'id'
      }
    }
  },
  created() {
  },
  mounted() {
    this.onLoad()
  },
  methods: {
    //格式化日期
    formatDate(row, column, cellValue, index){
        console.log(cellValue,"row")
      let format = formatDate(new Date(cellValue),"yyyy-MM-dd HH:mm:ss")
      return format
    },

    rowDetail(row) {
      console.log(row,"row")
      this.$router.push({
        path: `/business/cps/data-acquisition-monitoring/View`,
        query: {
          id: row.id,
        }
      })
    },
    gridHeadSearch(query) {
      this.page.currentPage = 1;
      this.onLoad(this.page, query)
    },
    gridHeadEmpty() {
      this.page.currentPage = 1;
      this.onLoad(this.page,{})
    },
    onLoad(page, params) {
      // this.page = page;
      this.tableLoading = true;
      // 默认查询条件,添加已启用条件
      this.searchForm.isEnable=1
      //Object.assign(this.$refs.gridHeadLayout.searchForm, {isEnable: 1})
      getPage(
        this.page.currentPage,
        this.page.pageSize,
        this.searchForm
      ).then(res => {
        const data = res.data;
        //this.$refs.gridLayOut.page.total = data.total;
        this.tableData = data.records;
        this.page.total = data.total;
        this.tableLoading = false;
        this.searchForm = {};
        //this.$refs.gridLayOut.selectionClear();
      });
    },
    handleSizeChange(val) {
      console.log(val)
      console.log(this.page)
      this.page.pageSize = val
      this.onLoad(this.page)
    },
    handleCurrentChange(val) {
      console.log(val)
      this.page.currentPage = val
      this.onLoad(this.page)
    },

  }
}
</script>

<style scoped>
.monitoring ::v-deep .el-form-item {
  width: 98%;
}
.monitoring ::v-deep .el-form-item__content {
  width: 98%;
}

.monitoring ::v-deep .el-select{
  width: 98%;
}
</style>
